
/**
 * @description 基础modal弹窗
 * @author meishudan
 */
import React, { useState, useEffect } from 'react'
import {
  Modal,ModalProps
} from 'antd';

interface Props {
  visible?: boolean;
  title?: React.ReactNode;
  modalContent?: React.ReactNode;
  maskTransitionName?:string;
  modalProps?:ModalProps;//modal相关的其他属性
  icon?: React.ReactNode;
  wrapperClassName?:string;
}

const BaseModal = (props: Props & ModalProps) => {
  let {
    modalContent,
    visible,
    maskTransitionName,
    title,
    ...modalProps
  } = props;

  useEffect(()=>{
    
    return ()=>{
      // alert('卸载')
      console.log('------------BaseModal卸载--------')
      top.postMessage({ open: false }, location.origin);
    }

  },[])
  
  useEffect(()=>{
    //控制遮罩重叠
    if(visible===true){
      console.log(visible,'----basemodal------open-true',111);
      top.postMessage({ open: true }, location.origin);
    }else if(visible===false){
      console.log(visible,'----basemodal------open-false',222);

      top.postMessage({ open: false }, location.origin);
    }
    // return ()=>{
    //   console.log(visible,'----basemodal------open-false',333);

    //   top.postMessage({ open: false }, location.origin);
    //   handleMaskDisplay(false);
    // }

  },[visible])

 return (
   (<div >
     <Modal
       title={title}
       open={visible}
       maskTransitionName={maskTransitionName||''}//取消modal遮罩动画
       {...modalProps}
       >
       {modalContent}

     </Modal>
   </div>)
 );
}
export default BaseModal;
